import React, {Component} from 'react';
import { Card, List,message  } from 'antd';
import {ArrowLeftOutlined} from "@ant-design/icons";
import {reqProductInfo,reqCategoryInfo} from '../../../api'


class Detail extends Component {
  state = {
    productInfo: {},  // 商品信息
    categoryInfo: ''  // 分类信息
  }
  render() {
    let {productInfo, categoryInfo} = this.state
    return <Card title={<div><ArrowLeftOutlined style={{color:'#1DA57A'}}  onClick={()=>{this.props.history.goBack()}}/> 商品详情</div>}>
        <List>
          <List.Item style={{borderBottom: '1px solid #e8e8e8'}}>
            <span style={{fontSize: 20,fontWeight: 'bold',marginRight: 10}}>商品名称：</span>
            <span>{productInfo.name}</span>
          </List.Item>
          <List.Item style={{borderBottom: '1px solid #e8e8e8'}}>
            <span style={{fontSize: 20,fontWeight: 'bold',marginRight: 10}}>商品描述：</span>
            <span>{productInfo.desc}</span>
          </List.Item>
          <List.Item style={{borderBottom: '1px solid #e8e8e8'}}>
            <span style={{fontSize: 20,fontWeight: 'bold',marginRight: 10}}>商品价格：</span>
            <span>{productInfo.price}元</span>
          </List.Item>
          <List.Item style={{borderBottom: '1px solid #e8e8e8'}}>
            <span style={{fontSize: 20,fontWeight: 'bold',marginRight: 10}}>所属分类：</span>
            <span>{categoryInfo}</span>
          </List.Item>
          <List.Item style={{borderBottom: '1px solid #e8e8e8'}}>
            <span style={{fontSize: 20,fontWeight: 'bold',marginRight: 10}}>商品图片：</span>
            <span>{this.getPicture()}</span>
          </List.Item>
          <List.Item>
            <span style={{fontSize: 20,fontWeight: 'bold',marginRight: 10}}>商品详情：</span>
            <span dangerouslySetInnerHTML={{__html:productInfo.detail}}></span>
          </List.Item>
        </List>
      </Card>
  }
  
  componentDidMount() {
    // 根据商品ID获取商品
    this.getProductInfo()
  }
  
  // 图片遍历
  getPicture = () => {
    let {productInfo} = this.state
    if (productInfo.imgs) {  // 如果存在，是修改页面
      let imgArr = []
      productInfo.imgs.forEach((item,i) => {
        imgArr.push(
            <img key={i} style={{width:104,height:104,padding:'10px',border:'1px solid #d9d9d9', margin: '5px'}} src={'/upload/'+item} alt="商品图片"/>
          )
      })
      return imgArr
    } else {   // 添加页面或修改页面
      return ''
    }
  }
  
  // 根据商品ID获取商品
  getProductInfo = async () => {
    let id = this.props.match.params.id;
    let res = await reqProductInfo(id);
    let {status, data, msg} = res;
    if (status === 0) {   // 获取数据成功
      this.setState({
        productInfo: data
      });
      
      // 获取数据成功，根据分类ID获取分类
      this.getCategoryInfo(data.categoryId)
      
    } else {  // 获取数据失败
      message.error(msg, 1)
    }
  }
  
  // 根据分类ID获取分类
  getCategoryInfo = async (categoryId) => {
    let res = await reqCategoryInfo(categoryId)
    let {status, data, msg} = res
    if (status === 0) { // 获取分类成功
      this.setState({
        categoryInfo: data.name
      })
    } else {  // 获取分类失败
      message.error(msg, 1)
    }
  }
}

export default Detail;
